<%@page pageEncoding="UTF-8" %>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>数据融合平台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/font.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/xadmin.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/echarts.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    .two{
      width: 60%;
      float: left;
    }
    .rank{
      width: 40%;
      float: left;      
      background: #fbc80b; 
      height: 300px;
      border-radius: 20px 20px 0 0 ;
      margin-bottom: 30px;
      margin-top: 25px;
      color:#FFF;
    }
    .ranktop{
      width: 100%;
      background: #28495a;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 18px;
      border-radius: 20px 20px 0 0 ;        
    }
    .three{
       width: 100%;
       float: left;
       margin-bottom: 50px;
    }
    .clubsweek{
        margin-top:60px;width: 40%;height:400px; background: red; float: left;
    }
    .clubsday{
      		  margin-left:200px; 
    }
    .layui-table td, .layui-table th{
      text-align: center;
    }
    .layui-table, .layui-table-view {
        margin: 0px 0;
    }
    </style>
  </head>
  
  <body class="layui-anim layui-anim-up">
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">平台数据</a>
        <a>
          <cite>今日数据</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <div class="two">
        <div id="day" style="margin-top:60px;width: 50%;height:280px; float: left;"></div>     
        <div id="ydlcday" style="margin-top:60px;width: 50%;height:280px; float: left;"></div>
        <div id="ydscday" style="margin-top:60px;width: 50%;height:280px; float: left;"></div> 
        <div id="clubsday" style="margin-top:60px;width: 50%;height:280px; float: left;"></div>
      </div>
      <div class="rank">
          <div class="ranktop">今日健步里程排行表</div>
          <table class="layui-table">
            <thead>
              <tr>
                <th>名次</th><th>姓名</th><th>学号</th><th>里程</th>
              </tr>
            </thead>
          <tbody>
              <tr><td>1</td><td></td><td></td></tr>
          </tbody>
          </table>
      </div>
      <div class="rank">
          <div class="ranktop">今日俱乐部活跃度排行表</div>
            <table class="layui-table">
              <thead>
                <tr>
                  <th>名次</th><th>俱乐部名</th><th>打卡率</th>
                </tr>
              </thead>
            <tbody id="clubRanking">
              <tr></tr>
            </tbody>
            </table>
      </div>
    </div>
    <script>
        var clubsday = echarts.init(document.getElementById('clubsday'));
        var day = echarts.init(document.getElementById('day'));
        var ydlcday = echarts.init(document.getElementById('ydlcday'));
        var ydscday = echarts.init(document.getElementById('ydscday'));
       
        //百分比转换
        function toPercent(point){
            if (point==0) {
                return 0;
            }
            var str=Number(point*100).toFixed();
            str+="%";
            return str;
        }
        
        //今日俱乐部活跃度排行表
        $.ajax({
            url:"<%=request.getContextPath()%>/platform/todayClubActiveRanking",
			async : false,
			type : 'get',
			dataType : "json",
			success : function(result) {
				var j=1;
				var k;
				 $('#clubRanking tr:gt(0)').remove();//删除之前的数据
			        var s = '';
			        for (var i = 0; i <result.length; i++){ 
			        	if(i==0){
			        		k=j;
			        		}
			        	else if(toPercent(result[i-1].value)==toPercent(result[i].value)){
			        		k=j;
			        	}else{
			        		k=i+1;
			        		j=i+1;
			        	}
			        	s += '<tr><td>' + k + '</td><td>' + result[i].name + '</td><td>' +toPercent(result[i].value) + '</td></tr>';
			        	}
			        $('#clubRanking').append(s);
			},
			error : function() {
			}
		});
        
        
    	//今日活动人数图表制作初始       
		day.setOption({
			title : {
				text : '今日活动人数',
				x : 'center'
			},
			tooltip : {
				trigger : 'axis'
			},
			color:['#28495a', '#9bcd38','#fbc80b','#ee5a14','#353537'],
			grid : {
				x : 40,
				y : 40,
				x2 : 70,
				borderWidth : 1
			},
			legend : {
				x : 80,
			},
			calculable : true,
			xAxis : [ {
				type : 'category',
				data : [],
			} ],
			yAxis : [ {
				type : 'value',
				name : '人数',
			} ],
			series : []
		});
        
        //今日活动人数json解析
        var seriestodayActiveCount=[];  //series数据集
        var nameArray=[];  //name数据集
        var valueArray=[];  //值
        $.ajax({
            url:"<%=request.getContextPath()%>/platform/todayActiveCount",
			async : false,
			type : 'get',
			dataType : "json",
			success : function(result) {
				//循环取数据
				for (var i = 0; i < result.length; i++) {
					nameArray.push(result[i].name);
					valueArray.push(result[i].value);
				}
				seriestodayActiveCount.push({
					// name:[],
					type : 'bar',
					data : valueArray,
				})
			},
			error : function() {
			}
		});

		//今日活动人数数据表图表制作    
		day.setOption({
			xAxis : [ {
				data : nameArray,
			} ],
			series : seriestodayActiveCount
		});

		
		
		//今日活动总里程数
		ydlcday.setOption({
			title : {
				text : '今日活动总里程',
				x : 'center'
			},
			tooltip : {
				trigger : 'axis'
			},
			color:['#9bcd38','#fbc80b','#ee5a14','#353537'],
			grid : {
				x : 40,
				y : 40,
				x2 : 70,
				borderWidth : 1
			},
			legend : {
				x : 80,
			},
			calculable : true,
			xAxis : [ {
				type : 'category',
				data : [ '晨跑', '健步' ],
			} ],
			yAxis : [ {
				type : 'value',
				name : '公里',
			} ],
			series : [ {

				type : 'bar',
				data : [ 50, 30 ],
			} ]
		});

		//今日活动总时长
		ydscday.setOption({
			title : {
				text : '今日活动总时长',
				x : 'center'
			},
			tooltip : {
				trigger : 'axis'
			},
			color:['#fbc80b','#ee5a14','#353537'],
			grid : {
				x : 40,
				y : 40,
				x2 : 70,
				borderWidth : 1
			},
			legend : {
				x : 80,
			},
			calculable : true,
			xAxis : [ {
				type : 'category',
				data : [ '晨跑', '健步' ],
			} ],
			yAxis : [ {
				type : 'value',
				name : '分钟',
			} ],
			series : [ {

				type : 'bar',
				data : [ 50, 30 ],
			} ]
		});

		
		//俱乐部今日活动总人数初始
		clubsday.setOption({
			title : {
				text : '俱乐部今日活动人数',
				x : 'center'
			},
			color:['#28495a', '#9bcd38','#fbc80b','#ee5a14','#353537'],
			tooltip : {
				trigger : 'item',
				formatter : "{a} <br/>{b}: {c} ({d}%)"
			},
			series : [ {
				name : '访问来源',
				type : 'pie',
				radius : [ '30%', '60%' ],
				avoidLabelOverlap : false,
				label : {
					normal : {
						show : false,
						position : 'center'
					},
					emphasis : {
						show : true,
						textStyle : {
							fontSize : '20',
							fontWeight : 'bold'
						}
					}
				},
				labelLine : {
					normal : {
						show : false
					}
				},
				data : []
			} ]
		});
		
		//俱乐部今日活动总人数数据源
		var seriesclubsday=[];
		 $.ajax({
	            url:"<%=request.getContextPath()%>/platform/todayClubActiveCount",
				async : false,
				type : 'get',
				dataType : "json",
				success : function(result) {
					seriesclubsday.push({
						data:result,
					})
				},
				error : function() {
				}
			});
		//俱乐部今日活动总人数
		 clubsday.setOption({
				series : seriesclubsday
			});
	</script>
</body>
</html>